<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.switch{
			display: inline-block;
			overflox: hidden;
		}
     	input.switch-checkbox[type='checkbox']{
		 display: none;
		}
         .switch>label{
			display: block; position: relative; 
			cursor: pointer; 
			padding: 2px; 
			width:16px; 
			height:8px;
			background-color: #ddd; 
			border-radius: 20px;}
        .switch>label:before,.switch>label:after{
			display: block;
			position: absolute; top: 1px; left: 1px; bottom: 1px; content: "";}
        .switch>label:after{
			width: 9px; 
			background-color: #fff; border-radius: 100%; 
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
			transition: margin 0.4s;}
        .switch>label:before{right: 1px;
			background-color: #f1f1f1; 
			border-radius:8px;
			transition: background 0.4s;
		}
        .switch>label:before{
			background-color: #5bd66a;
		}
/*        label:after{margin-left: 9px;}*/
	</style>
</head>
<body>
	<span class="switch">
		<label>
			<input type="checkbox"  class="switch-checkbox">
		</label>
	</span>
</body>
</html>